{% extends "base.html" %}

{% load staticfiles %}

{% block title %}
my information
{% endblock %}

{% block content %}
    <div class="row text-center vertical-middle-sm">
        <h1>My Information</h1>
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-4 text-right"><span>用户名:</span></div>
                    <div class="col-md-8 text-left">{{ user.username }}</div>
                </div>
                <div class="row">
                    <div class="col-md-4 text-right"><span>邮箱:</span></div>
                    <div class="col-md-8 text-left">{{ user.email }}</div>
                </div>
                <div class="row">
                    <div class="col-md-4 text-right"><span>生日:</span></div>
                    <div class="col-md-8 text-left">{{ userprofile.birth }}</div>
                </div>
                <div class="row">
                    <div class="col-md-4 text-right"><span>电话:</span></div>
                    <div class="col-md-8 text-left">{{ userprofile.phone }}</div>
                </div>
                <div class="row">
                    <div class="col-md-4 text-right"><span>毕业学校:</span></div>
                    <div class="col-md-8 text-left">{{ userinfo.school }}</div>
                </div>
                <div class="row">
                    <div class="col-md-4 text-right"><span>工作单位:</span></div>
                    <div class="col-md-8 text-left">{{ userinfo.company }}</div>
                </div>
                <div class="row">
                    <div class="col-md-4 text-right"><span>职业:</span></div>
                    <div class="col-md-8 text-left">{{ userinfo.profession }}</div>
                </div>
                <div class="row">
                    <div class="col-md-4 text-right"><span>地址:</span></div>
                    <div class="col-md-8 text-left">{{ userinfo.address }}</div>
                </div>
                <div class="row">
                    <div class="col-md-4 text-right"><span>个人介绍:</span></div>
                    <div class="col-md-8 text-left">{{ userinfo.aboutme }}</div>
                </div>
                <div class="row">
                    <a href="{% url 'account:edit_my_information'%}" class="btn btn-primary btn-lg">edit my information</a>
                </div>
            </div>
            <div class="col-md-6">
                <div style="margin-right: 100px;">
                    {% if userinfo.photo %}
                        <img src="{{ userinfo.photo|striptags }}" name="user_face" class="img-circle" width="270px" id="my_phone" alt="">
                    {% else %}
                        <img src="{% static 'images/iot.png' %}" name="user_face" class="img-circle" width="270px" id="my_phone" alt="">
                    {% endif %}
                </div>
                <div style="margin-right: 100px;">
                    <button class="btn btn-primary btn-lg" id="upload_img" onclick="upload_image_layer()">Upload my phone</button>
                </div>
            </div>
        </div>
    </div>

    <script src="{% static 'js/layer.js' %}"></script>
    <script>
    function upload_image_layer() {
        layer.open({
            'title':'上传头像',
            content:"{% url 'account:my_image' %}",
            type:2,
            area:['650px', '690px']
        });
    }
    </script>
{% endblock %}